<template>
	<scroll-view class="all" scroll-y="true" >
		<view class="searchtop" @click="gotosearch()" >
			<image src="../../static/search.png" ></image>
			<input class="kw" placeholder="请输入关键字" disabled="true"/>
		</view>
		
		<view class="type">
			<view class="up">
				<view class="typeItem"><text class="t-icon t-icon-yexiao icon"></text><text class="desc">夜宵</text></view>
				<view class="typeItem"><text class="t-icon t-icon-jitui icon"></text><text class="desc">炸鸡</text></view>
				<view class="typeItem"><text class="t-icon t-icon-naicha icon"></text><text class="desc">奶茶</text></view>
				<view class="typeItem"><text class="t-icon t-icon-nanguabing icon"></text><text class="desc">烧烤</text></view>
				<view class="typeItem"><text class="t-icon t-icon-hanbao icon"></text><text class="desc">汉堡</text></view>
			</view>
			<view class="down">
				<view class="typeItem"><text class="t-icon t-icon-meishi icon"></text><text class="desc">面馆</text></view>
				<view class="typeItem"><text class="t-icon t-icon-icon-test icon"></text><text class="desc">蛋糕</text></view>
				<view class="typeItem"><text class="t-icon t-icon-shuiguo icon"></text><text class="desc">水果</text></view>
				<view class="typeItem"><text class="t-icon t-icon-shucai icon"></text><text class="desc">蔬菜</text></view>
				
				<view class="typeItem"><text class="t-icon t-icon-shangcheng_xiuxianyulequanbufenlei icon"></text><text class="desc">全部</text></view>
				
			</view>
			
		</view>
		
		<!-- 店铺列表 -->
		<view class="title">推荐店铺</view>
		
		<view class="shops" v-for="item in allshop">
			<view class="shop" @click="gotoshopdetail(item.shopuuid,item.shopname)">
				<image v-bind:src="item.shoplogopath" class="shoplogo"></image>
				<text class="shopname">{{item.shopname}}</text>
				 
			</view> 
			
			
			
		</view>
		
    </scroll-view>
		
	

	
	
	
</template>

<script>

	
	
	export default {
	 
		data() {
			return {
				allshop:"",
			}
		},
		onLoad() {
			uni.request({
				url:getApp().globalData.http+"/shop/getshops",
				method:"GET",
				header:{
					"Authorization":uni.getStorageSync("token")
				},
				success: (res) => {
					this.allshop=res.data;
				}
			})
		},
		onShow() {
			uni.request({
				url:getApp().globalData.http+"/shop/getshops",
				method:"GET",
				header:{
					"Authorization":uni.getStorageSync("token")
				},
				success: (res) => {
					this.allshop=res.data;
				}
			})
		},
		methods: {
			gotosearch(){
				uni.navigateTo({
					url:"search",
					animationType:'slide-in-bottom'
				})
			},
			gotoshopdetail(shopuuid,shopname){
				if(uni.getStorageSync("token")==""){
					uni.showToast({
						title:"请先登录",
						icon:"none"
					})
					
				}
				else{
					uni.navigateTo({
						url:"./shopdetail/everyshop?shopuuid="+shopuuid+"&shopname="+shopname
					})
				}
				
				
			}
		}
	}
</script>

<style scoped>
	.all{
		height: 100%;
		/* width: 100%; */
		width: auto;
		/* margin: 5px; */
		
		background-color: #F4F4F4;
		overflow: hidden;
		display: flex; 
		flex-direction: column;
		align-items: center;
		/* padding: 10px; */
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
	
		
		
		/* 为了让scrolview禁止横向滚动起作用 */
		white-space: nowrap;
		
	}
	.searchtop{
		
		width: 100%; 
		height: 60upx;
		border-radius: 15upx;
		background-color:#FFFFFF;
		/* margin: 10px; */
		margin-bottom: 10px;
		display: flex;
		flex-direction: row;
		align-items:center ;
		margin-top: 10px;
		
	}
	.searchtop image{
		margin-top: 3px;
		margin-left: 5px;
		width: 20px;
		height: 20px;
		overflow: hidden;
		
	}
	.kw{
		margin-top: 3px;
		margin-left: 5px;
		width: 80%;
	}
	.type{
		width: 100%;
		height: 150px;
		background-color: #007AFF;
		
		border-radius: 15px;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.up{
		height: 50%;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		
		
	}
	.down{
		height: 50%;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.typeItem{
		/* width: 30px;
		height: 30px; */
		/* background-color: #000000; */
		/* background-color: #C0C0C0; */
		margin-left: 25px;
		margin-right: 20px;
		display: flex;
		
		flex-direction: column;
		align-items: center;
		
	}
	.desc{
	
		font-size: 13px;
	}
	.icon{
		background-repeat: no-repeat;
		width: 30px;
		height:30px;
	}
	
	/* 店铺列表css */
	.title{
		margin-right: 80%;
		margin-top: 10px;
	}
	.shops{
		/* height: 100%; */
		height: auto;
		width: 100%;
		border: #000000;
		margin-top: 10px;

	}
	.shop{
		width: 100%;
		height: 120px;
		background-color: #FFFFFF;
		border-radius: 15px;
		display: flex;
		flex-direction: row;
		
	}
	.shoplogo{
		width: 100px;
		height: 100px;
		border-radius: 15px;
		margin: 10px;
	}
	.shopname{
		margin-top: 10px;
	}
</style>
